<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
    <style>
    	body,html{
          background:#f2f2f2;
					margin-bottom: 4rem
    	}
      .game-msg{
          width: 100%;
          height: auto;
          background: white;
      }
      .game-title,.game-price,.game-time{
          width: 100%;
          height: auto;
          padding: 0.1rem 0.5rem;
      }
      .game-title{
          padding-top: 0.5rem;
      }
      .game-time{
          padding-bottom: 0.5rem;
          font-size: 3vw;
          color: #666666;
      }
      .game-price{
          font-size: 6vw;
          color: #ff4800;
      }
      .my-service,.game-info{
          padding: 0.5rem;
          margin-top: 0.5rem;
          background: white;
      }
      .my-service .icon{
          margin-right: 0.5rem;
          border-radius: 2px;
          padding:0.1rem 0.15rem;
          font-size: 3vw;
          color: white;
      }
      .service-discribe,.game-info-detail,.other-info{
          margin-top: 1px;
          background: white;
      }
      .bottom{
          width: 100%;
          height: 3rem;
          position: fixed;
          bottom: 0;
          left: 0;
      }
      .bottom div{
          height:100%;
          text-align: center;
          line-height: 3rem;
          color: white;
          font-size: 4.5vw;
      }
      #kefu{
    	width: 2.5rem;
    	height: 2.5rem;
    	border-radius: 50%;
    	background: #ff4800;
    	position: absolute;
    	bottom: 3rem;
    	right: 0;
    	touch-action: none;
    	overflow:hidden;
    }
    #kefu img{
    	width:90%;
    	height:80%;
    	display:block;
    	margin: 0 auto;
    	margin-top:0.25rem;
    }
    </style>
</head>
<body>
    <div class="game-msg">
        <div class="game-title"></div>
        <div class="game-price"><span style="color:black;font-size:4vw" class="aui-hide" id="lowestPrice">底价：</span>&yen;<span id="pri"></span></div>
        <div class="game-time">
            <span>发布时间：<span id="onsaleTime"></span></span>
            <span class="aui-pull-right">到期时间：<span id="downsaleTime"></span></span>
        </div>
    </div>
    <div class="my-service" onclick="showDetail()" id="serType">
        <span style="margin-right:0.5rem;font-weight:bold">服务种类</span>
        <span class="icon" style="background:#39a0ff">图</span>
        <span class="icon" style="background:#3bc424">担</span>
        <i class="aui-iconfont aui-icon-down aui-pull-right"></i>
    </div>
    <div class="service-discribe aui-hide">
        <div class="picture aui-row" style="border-bottom:1px solid #f2f2f2;height:2.5rem;">
            <div class="aui-col-xs-1" style="text-align:center">
                <span class="icon" style="background:#39a0ff;border-radius: 2px;padding:0.1rem 0.15rem;font-size: 3vw;color: white;margin-top:0.6rem">图</span>
            </div>
            <div class="aui-col-xs-11" id="picWord"></div>
        </div>
        <div class="picture aui-row" style="border-bottom:1px solid #f2f2f2;height:2.5rem;">
            <div class="aui-col-xs-1" style="text-align:center">
                <span class="icon" style="background:#3bc424;border-radius: 2px;padding:0.1rem 0.15rem;font-size: 3vw;color: white;margin-top:0.6rem">担</span>
            </div>
            <div class="aui-col-xs-11" id="guarantee"></div>
        </div>
    </div>
    <div class="game-info" onclick="showInfo()">
        <span style="margin-right:0.5rem;font-weight:bold">商品参数</span>
        <i class="aui-iconfont aui-icon-down aui-pull-right"></i>
    </div>
    <div class="game-info-detail aui-hide">
        <div class="picture aui-row" style="border-bottom:1px solid #f2f2f2;height:2.5rem;line-height:2.5rem;padding-left:0.5rem" id="">
            所在区服：<span id="serverName"></span>
        </div>
        <div class="picture aui-row" style="border-bottom:1px solid #f2f2f2;height:2.5rem;line-height:2.5rem;padding-left:0.5rem">
            客户端/平台：<span id="platformName"></span>
        </div>
    </div>
    <div class="game-info">
        <span style="margin-right:0.5rem;font-weight:bold">其他详情</span>
    </div>
    <div class="other-info" style="padding: 0 0.5rem" id="otherMsg" style="margin-bottom:10rem"></div>
    <div class="bottom aui-row" id="buyer">
        <div class="aui-col-xs-4" style="background:#0099cc" onclick="goToShop()"><i class="fa fa-bank"></i>&nbsp;商家店铺</div>
        <div class="aui-col-xs-4" style="background:#ff9402" onclick="connectSeller()"><i class="fa fa-phone"></i>&nbsp;联系卖家</div>
        <div class="aui-col-xs-4" style="background:#ff4800" onclick="goToOrder()">立即购买&nbsp;<i class="fa fa-arrow-circle-right"></i></div>
    </div>
		<div class="bottom aui-row" id="seller">
        <div class="aui-col-xs-6" style="background:#ff9402" onclick="connectSeller()"><i class="fa fa-phone"></i>&nbsp;联系卖家</div>
        <div class="aui-col-xs-6" style="background:#ff4800" onclick="goToGivePrice()">立即报价&nbsp;<i class="fa fa-arrow-circle-right"></i></div>
    </div>
    <div id="kefu" onclick="openServicePer()">
	  	<img src="../icon/kefu.png"/>
	  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/drap.js"></script>
<script type="text/javascript" src="../script/kefu.js"></script>
<script type="text/javascript">
  var UIScrollPicture;
  var proId;
  var imgArray;
  var shopId;
  var shopName;
	var userType;
	var buyerId;
	var sellerMsg;
	apiready = function(){
	  proId = api.pageParam.data.id;
		userType = $api.getStorage('userType');
	  getProInfo();
      $api.css($api.dom('.game-msg'),'margin-top:'+api.winHeight / 3.7+'px');
      UIScrollPicture = api.require('UIScrollPicture');
			api.addEventListener({
			    name: 'rebackToDetail'
			}, function(ret, err){
			    if( ret ){
			         proId = ret.value.key;
							getProInfo();

			    }
			});
	};
  function showDetail(){
      if($api.cssVal($api.dom('.service-discribe'),'display') == 'none'){
          $api.removeCls($api.dom('.service-discribe'), 'aui-hide');
      }else{
          $api.addCls($api.dom('.service-discribe'), 'aui-hide');
      }
  }
  function showInfo(){
      if($api.cssVal($api.dom('.game-info-detail'),'display') == 'none'){
          $api.removeCls($api.dom('.game-info-detail'), 'aui-hide');
      }else{
          $api.addCls($api.dom('.game-info-detail'), 'aui-hide');
      }
  }
	function getProInfo(){
		var data={};
		data['values'] = {};
		data['values']['proId'] = proId;
		requestData('Goods/getProInfo',data,'NO','NO','NO',_callbackProInfo);
	}
	function _callbackProInfo(ret){
		if(ret.status == 200){
			imgArray = ret.proInfo.goods_img.split(',');
			sellerMsg = ret.proInfo.seller_info;
			if(imgArray.length>0){
				for(var i=0;i<imgArray.length;i++){
					imgArray[i] = pictureUrl+imgArray[i];
				}
				showPictures(imgArray);
				UIScrollPicture.reloadData({
					data:{
						paths:imgArray
					}
				})
			}
			if(ret.proInfo.user_type == 'buyer'){
				$api.addCls($api.byId('buyer'), 'aui-hide');
				$api.removeCls($api.byId('seller'), 'aui-hide');
				$api.removeCls($api.byId('lowestPrice'), 'aui-hide');
				$api.addCls($api.byId('serType'), 'aui-hide');

			}else{
				$api.addCls($api.byId('seller'), 'aui-hide');
				$api.addCls($api.byId('lowestPrice'), 'aui-hide');
				$api.removeCls($api.byId('buyer'), 'aui-hide');
				$api.removeCls($api.byId('serType'), 'aui-hide');
			}
			$api.text($api.dom('.game-title'), ret.proInfo.game_name+'【'+ret.proInfo.server+'】'+ret.proInfo.goods_word);
			$api.text($api.byId('pri'), ret.proInfo.goods_price);
			$api.text($api.byId('onsaleTime'), ret.proInfo.onsale_time);
			$api.text($api.byId('downsaleTime'), ret.proInfo.downsale_time);
			$api.text($api.byId('picWord'), ret.proInfo.pic_service_word);
			$api.text($api.byId('guarantee'), ret.proInfo.guarantee_service_word);
			$api.text($api.byId('serverName'), ret.proInfo.server);
			$api.text($api.byId('platformName'), ret.proInfo.platform);
			$api.html($api.byId('otherMsg'), ret.proInfo.goods_discribe);
			shopId = ret.proInfo.shop_id;
			shopName = ret.proInfo.shop_name;
			buyerId = ret.proInfo.user_id;
		}
	}
	function showPictures(picArr){
		UIScrollPicture.open({
	        rect: {
	              x: 0,
	              y: 0,
	              w: api.winWidth,
	              h: api.winHeight / 3.7
	          },
	          data:{
	            paths: picArr
	          },
	          styles:{
	              indicator: {
	                 dot:{
	                   w:8,
	                   h:8,
	                   r:4,
	                   margin:4
	                },
	                  align: 'center',
	                  color: 'rgba(0,0,0,0.5)',
	                  activeColor: '#E91E63'
	              }
	          },
	          contentMode: 'scaleToFill',
	          interval: 3,
	          fixedOn: api.frameName,
	          loop: true,
	          fixed: false
	      },function(ret, err) {
	          if (ret) {
	  		  	if(ret.eventType == 'click'){
	  		  		browsePictures(ret.index);
	  		  	}
	          }
	      });
	}
	function browsePictures(index){
		api.openWin({
	        name: 'pictureBrowse',
	        url: 'pictureBrowse.html',
	        pageParam:{
	        	images:imgArray,
	        	index:index
	        },
	        animation:{
	        	type:'fade',
	        	duration:300
	        }
        });
	}
	function goToShop(){
		api.openWin({
				name: 'shopDetail',
				url: './win.html',
				pageParam: {
						page:'shopDetail',
						title: shopName,
          data:{
          	id:shopId,
          },
          bounces:true
				}
		});

	}
	function goToOrder(){
		var userId = $api.getStorage('userId');
		if(userId){
			api.openWin({
					name: 'makeSureOrder',
					url: './winOrder.html',
					pageParam: {
							page:'makeSureOrder',
							title: '确认订单',
	          data:{
	          	id:proId,
	          },
	          bounces:false
					}
			});
		}else{
			api.openWin({
          name: 'login',
          url: './winLogin.html',
          pageParam: {
              page:'login',
              title: '登陆'
          }
      });
		}
	}
	function connectSeller(){
		var userId = $api.getStorage('userId');
		if(userId){
			api.openWin({
					name: 'chatRoom',
					url: './winChatroom.html',
					pageParam: {
							page:'chatRoom',
							title: '联系卖家',
							data:sellerMsg
					}
			});
		}else{
			api.openWin({
          name: 'login',
          url: './winLogin.html',
          pageParam: {
              page:'login',
              title: '登陆'
          }
      });
		}
	}
	function goToGivePrice(){
		var dialog = new auiDialog({})
		UIScrollPicture.hide();
		$api.css($api.dom('.game-msg'),'margin-top:'+0+'px');
		dialog.prompt({
	    title:"立即报价",
	    text:'请输入您的报价',
	    buttons:['取消','确定']
    },function(ret){
			$api.css($api.dom('.game-msg'),'margin-top:'+api.winHeight / 3.7+'px');
			UIScrollPicture.show();
      if(ret.buttonIndex == 2){
				if(!(/([1-9]+[0-9]*|0)(\\.[\\d]+)?/.test(ret.text)) || ret.text<$api.text($api.byId('pri'))){
		        api.toast({
		            msg: '报价不得低于底价',
		            duration: 4000,
		            location: 'bottom'
		        });
      	}else{
					var data = {};
					data['values'] = {};
					data['values']['givePrice'] = ret.text;
					data['values']['sellerId'] = $api.getStorage('userId');
					data['values']['buyerId'] = buyerId;
					data['values']['goodsId'] = proId;
					requestData('Order/givePriceOrder',data,'NO','NO','NO',_callbackRet);
				}
			}
    })
	}
	function _callbackRet(ret){
		if(ret.status == 200){
			api.toast({
					msg: ret.msg,
					duration: 4000,
					location: 'bottom'
			});
		}else{
			api.toast({
					msg: ret.msg,
					duration: 4000,
					location: 'bottom'
			});
		}
	}
</script>
</html>
